<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list.filter(data => !searchByName || data.name.toLowerCase().includes(searchByName.toLowerCase()))"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" min-width="70">
      </el-table-column>
      <el-table-column label="用户名" min-width="110" align="center" prop="name">
      </el-table-column>
      <el-table-column label="账号" min-width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.password }}
        </template>
      </el-table-column>
      <el-table-column label="权限" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.privilege | privilegeFilter">{{ scope.row.privilege }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        min-width="200"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="searchByName"
            size="mini"
            clearable
            prefix-icon="el-icon-search"
            placeholder="输入用户名搜索">
            <el-button slot="append" icon="el-icon-plus" @click="addUserDialogVisible = true"></el-button>
          </el-input>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updateUserDialog(scope.row)">编辑信息</el-button>
          <el-button
            size="mini"
            type="danger"
            slot="reference"
            @click="removeUser(scope.$index, list)">删除用户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑信息" :visible.sync="updateUserDialogVisible" :center="true" width="40%">
      <el-form ref="updateUser" :model="updateUser" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="updateUser.name"></el-input>
        </el-form-item>
        <el-form-item label="账 号">
          <el-input v-model="updateUser.account"></el-input>
        </el-form-item>
        <el-form-item label="密 码">
          <el-input v-model="updateUser.password"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="updateUser.privilege" placeholder="请选择权限">
            <el-option label="管理者" value="管理者"></el-option>
            <el-option label="操作者" value="操作者"></el-option>
            <el-option label="访问者" value="访问者"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserDialogVisible = false">修 改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增用户" :visible.sync="addUserDialogVisible" :center="true" width="40%">
      <el-form ref="updateUser" :model="addUser" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="addUser.name"></el-input>
        </el-form-item>
        <el-form-item label="账 号">
          <el-input v-model="addUser.account"></el-input>
        </el-form-item>
        <el-form-item label="密 码">
          <el-input v-model="addUser.password"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="addUser.privilege" placeholder="请选择权限">
            <el-option label="管理者" value="管理者"></el-option>
            <el-option label="操作者" value="操作者"></el-option>
            <el-option label="访问者" value="访问者"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserDialogVisible = false">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    privilegeFilter(privilege) {
      const privilegeMap = {
        访问者: 'success',
        操作者: 'gray',
        管理者: 'danger'
      }
      return privilegeMap[privilege]
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      searchByName: '',
      updateUserDialogVisible: false,
      addUserDialogVisible: false,
      updateUser: {},
      addUser: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    removeUser(index, rows) {
      rows.splice(index, 1)
    },
    updateUserDialog(user) {
      this.updateUserDialogVisible = true
      this.updateUser = user
    }
  }
}
</script>
